<template>
	<view class="warp" :class="lang">
		<u-navbar :is-fixed="true" v-bind:title="Number(current)+Number(1)+'/'+allnum" back-icon-name="arrow-leftward">
			<view class="slot-wrap greenbg heigh150">
				<view class="u-navbar-centent-slot"><!-- <text>购卡中心</text> --></view>
			</view>
		</u-navbar>
		<view class="page-section-spacing">
		                    <swiper class="swiper" :current="current" @change="currentkey" :indicator-dots="indicatorDots" :autoplay="autoplay">
		                        <swiper-item v-for="(item,index) in bzcon.jiaoTongBiaoZhiList" :key="index">
		                            <view class="swiper-item">
										<view class="guideimg">
											<image :src="item.img"></image>
										</view>
										<view class="guideti font-35"><text>{{item.name}}</text></view>
										<view class="guidetxt font-35" :class="lang+'layout'">
											<text>{{item.description}}</text>
								
										</view>
									</view>
		                        </swiper-item>
		                        
		                        <!-- <swiper-item>
		                            <view class="swiper-item uni-bg-blue">
										<view class="guideimg">
											<image src="../../static/del/003.jpg"></image>
										</view>
										<view class="guideti"><text>禁止通行</text></view>
										<view class="guidetxt">
											<text>禁止通行标志，就是禁止通行的一种交通标示，提示车辆和行人不能再向前行驶及通过，以免发生交通事故。</text>
											<text>
												红圈内空白是禁止一切机运车辆通行，红底白横杠是禁止机动车辆驶入，也有红底内加一个白叉。根据红圈内图案的不同可以表示不同的含义，提示人们不能在禁止方向行驶，以免发生交通事故，起到警示作用。正确使用禁止通行标志可以减少交通事故发生，保护生命财产安全。
											</text>
										</view>
									</view>
		                        </swiper-item> -->
		                    </swiper>
		                </view>
	</view>
</template>

<script>
	//接口
	import {
		jiaotongbiaozhilist_api		//交通标志接口
	} from '@/api/index';
	export default {
		data() {
			return {
				lang: this.$i18n.locale,
				indicatorDots: false,
				autoplay: false,
				current:0,
				thenum:0,
				allnum:0,
				bzcon:[]
			}
		},
		onLoad(options) {
			var that = this;
			var flid = options.flid;
			var conid = options.conid;
			
			that.https({
				url: jiaotongbiaozhilist_api,
				method: 'POST',
				header: {
					'content-type': 'application/json'
				},
				data: {},
				success: res => {
					
					var biaozhijson = res.biaozhi_list;
					console.log("res---",biaozhijson[flid]);
					that.bzcon = biaozhijson[flid];
					that.allnum = biaozhijson[flid].jiaoTongBiaoZhiList.length;
					console.log("allnum=",biaozhijson[flid].jiaoTongBiaoZhiList.length)
					that.current = conid
					that.thenum = conid+1;
					// that.kemu3videolist = res.kemu3;
				},
				fail: err => {
					console.log(err);
				}
			});
		},
		methods: {
			currentkey:function(e){
				console.log(e);
				var that = this;
				that.current = e.detail.current;
				that.thenum = e.detail.current+1;
			}
		}
	}
</script>

<style>
.wrap {
	display: flex;
	flex-direction: column;
	/* height: calc(100vh - var(--window-top)); */
	height: calc(100vh - 44px);
	width: 100%;
}
.swiper-item{
	width: 100%;
	height: 100%;
}
.guideimg{
	width: 750rpx;
	height: 500rpx;
	text-align: center;
}
.guideimg image{
	width: 400rpx;
	height: 376rpx;
	margin: 100rpx auto;
}
.guideti{
	width: 750rpx;
	height: 80rpx;
	line-height: 50rpx;
	text-align: center;
}
.guidetxt{
	width: 700rpx;
	line-height: 50rpx;
	margin: 0 auto;
	text-align: justify;
}
.page-section-spacing{
	width: 750rpx;
	height: calc(100vh - 44px);
}
.swiper{
	width: 100%;
	height: 100%;
}
</style>
